<template>
    <div>
        <el-container>
            <el-header>
                <el-button @click="showCode = !showCode">查看内容</el-button>
                <el-button @click="editXml">编辑内容</el-button>
            </el-header>
            <el-main>
                <div id="bpmn-view"></div>
            </el-main>
        </el-container>
        <el-dialog title="bpmn内容"
                width="90%"
                :visible.sync="showCode">
            <pre v-highlightjs="sourceCode"><code class="xml"></code></pre>
        </el-dialog>

        <el-dialog
                title="编辑内容"
                :visible.sync="centerDialogVisible"
                width="90%"
                center>
            <codemirror
                    ref="cmEditor"
                    :value="code"
                    :options="cmOptions"
                    @ready="onCmReady"
                    @focus="onCmFocus"
                    @input="onCmCodeChange"
            />
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveXml">保 存</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import BpmnViewer from 'bpmn-js/lib/Modeler';
    import 'codemirror/mode/xml/xml.js'
    import 'highlight.js/styles/github.css';
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/theme/base16-dark.css'

    export default {
        name: "ModelerView",
        data() {
            return {
                viewer: {},
                showCode: false,
                centerDialogVisible: false,
                code: '',
                cmOptions: {
                    tabSize: 4,
                    mode: 'application/xml',
                    theme: 'base16-dark',
                    lineNumbers: true,
                    line: true,
                }
            }
        },
        computed: {
            sourceCode() {
                return localStorage.getItem("xml-bpmn") ? localStorage.getItem("xml-bpmn") : '';
            },
            codemirror() {
                return this.$refs.cmEditor.codemirror
            }
        },
        methods: {
            onCmReady(cm) {
                console.log('the editor is readied!', cm)
            },
            onCmFocus(cm) {
                console.log('the editor is focused!', cm)
            },
            onCmCodeChange(newCode) {
                console.log('this is new code', newCode)
                this.code = newCode
            },
            editXml: function () {
                if (localStorage.getItem("xml-bpmn")) {
                    this.code = localStorage.getItem("xml-bpmn");
                }
                this.centerDialogVisible = true;
            },
            saveXml: function () {
               if (this.code){
                   localStorage.setItem("xml-bpmn",this.code);
               } else {
                   localStorage.removeItem("xml-bpmn")
               }

               this.$message.success("保存成功");
            }
        },
        mounted() {
            this.viewer = new BpmnViewer({container: '#bpmn-view'});
            if (localStorage.getItem("xml-bpmn")) {
                let overlays = this.viewer.get('overlays');
                let elementRegistry = this.viewer.get('elementRegistry');
                let canvas = this.viewer.get('canvas');
                this.viewer.importXML(localStorage.getItem("xml-bpmn")).then(() => {
                    canvas.addMarker('start', 'highlight');
                });
            }
        }
    }
</script>

<style scoped>
    #bpmn-view {
        height: 90%;
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
    }

    .el-header {
        line-height: 60px;
        text-align: right;
        z-index: 3000;
    }
</style>
